<script lang="ts" setup>
import { reactive } from 'vue'
import { ref } from 'vue'
import {Search} from "@element-plus/icons-vue";
const input1 = ref('')

const form=reactive({
  name: '',
  title: '',
  type: [],
  desc: '',
})
const onSubmit = () => {
  console.log('submit!')
}

const url =
    'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png'
const srcList = [
  'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png'
]
</script>

<template>
<!--  <h1>美食交流详情页</h1>-->
  <div style="display: flex;justify-content: space-between;">
    <div style="font-size: 20px;font-family:'Microsoft YaHei' ;">互联网美食分享平台</div>
    <div><el-input
        v-model="input1"
        style="width: 150px"
        size="small"
        placeholder="Please Input"
        :suffix-icon="Search"
    /></div>
  </div>

  <div align="center" style="height: 40px">
    <el-button type="primary" disabled>Home</el-button>

    <router-link to="/communication/list">
      <el-button type="primary">美食交流</el-button>
    </router-link>
    <router-link to="/notice/list">
      <el-button type="primary">美食公告</el-button>
    </router-link>
    <router-link to="/info/list">
      <el-button type="primary">美食资讯</el-button>
    </router-link>
    <router-link to="/user/info">
      <el-button type="primary">个人账户</el-button>
    </router-link>
    <router-link to="/user/star">
      <el-button type="primary">个人收藏</el-button>
    </router-link>
    <router-link to="/show/list">
      <el-button type="primary">美食展示</el-button>
    </router-link>
  </div>
  <div style="height: 20px"></div>

  <div align="center">
    <el-form :model="form" label-width="auto" style="max-width: 600px">
      <el-form-item label="图片">
          <el-image class="demo-image__preview"
              style="width: 100px; height: 100px"
              :src="url"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :preview-src-list="srcList"
              :initial-index="4"
              fit="cover"
          />

      </el-form-item>
      <el-form-item label="标题">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="分类">
        <el-select v-model="form.title" placeholder="请选择分类">
          <el-option label="美食分类1" value="1" />
          <el-option label="美食分类2" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="美食标签">
        <el-checkbox-group v-model="form.type">
          <el-checkbox value="美食标签1" name="type">
            美食标签1
          </el-checkbox>
          <el-checkbox value="美食标签2" name="type">
            美食标签2
          </el-checkbox>
          <el-checkbox value="美食标签3" name="type">
            美食标签3
          </el-checkbox>
          <el-checkbox value="美食标签4" name="type">
            美食标签4
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="发表内容">
        <el-input v-model="form.desc" type="textarea" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">Create</el-button>
        <el-button>Cancel</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped lang="scss">
.demo-image__error .image-slot {
  font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}
.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}
</style>